"use client"
import hospationav from '@/navigations-conf/hospationav'
import styles from './hold.module.scss'
import { Card, Divider, FloatingPanel, PageIndicator, Swiper, Tabs } from 'antd-mobile'
import Image from 'next/image'
import React, { useEffect, useRef, useState } from 'react'
import { useEmberboxStore } from '../../hooks/store'
const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']




const items = hospationav.map((group, index) => (
    <Swiper.Item key={index}>
        <div className='w-[21.70rem] h-[11rem] mb-6 flex flex-wrap   gap-[1.7rem] m-auto '>
            {group.items.map((item: any) => <div key={item.label} className='text-center'>
                <img src={item.icon} className='w-[4.14rem] h-[4.14rem]' alt="" />
                <span>{item.label}</span>
            </div>)}
        </div>
    </Swiper.Item>
))



const index = () => {
    const store: any = useEmberboxStore()
    let [anchors, setAnchors] = useState<any[]>([100, 200, 300, 400, 500, 667, 844, 896])

    let [swiperIndex, setSwiperIndex] = useState(0)
    const inputref = useRef(null)

    let handleSwiperChange = (index: number) => {
        // console.log(index);
        setSwiperIndex(index)
    }

    const handleKeyDown = (event: any) => {
        if (event.key === "Enter") { // 按下的键是"Enter"
            alert('blur')
            event.target.blur();
        }
    };

    useEffect(() => {
        setAnchors([100, , 200, 300, 400, 500, 667, 844, 896, window.innerHeight * 0.4, window.innerHeight * 1.0, window.innerHeight * 1.02])
        console.log(window);
    }, [])
    return (
        <>

            <FloatingPanel anchors={anchors}>
                <div className='layout float_inner w-full h-full flex flex-col gap-3 items-center '>
                    <div className='w-[22.56rem] h-[2.57rem] bg-[#F5F5F9] flex items-center justify-center rounded-full'>
                        <img src="/icons/searchbar/search.png" alt="" />
                        <input
                            ref={inputref}
                            type="text"
                            className='w-[18rem] bg-[#F5F5f9] outline-[0px] text-[#000]'
                            placeholder='请输入地名'
                            onKeyDown={handleKeyDown}
                        />
                        <img src="/icons/searchbar/micorphone.png" alt="" />
                    </div>
                    <Swiper
                        onIndexChange={handleSwiperChange}
                        indicator={() => null}>{items}
                    </Swiper>
                    <div className='w-[21.70rem] h-4  flex items-center justify-center '>
                        <PageIndicator total={hospationav.length} current={swiperIndex}
                            style={{
                                '--dot-color': '#C9C8DE',
                                '--active-dot-color': '#3734A9',
                                '--dot-size': '0.29rem',
                                '--active-dot-size': '0.71rem',
                                '--dot-border-radius': '50%',
                                '--active-dot-border-radius': '25%',
                                '--dot-spacing': '0.29rem',
                            }}
                        />
                    </div>
                    <div className='w-[21.70rem] '>
                        <Tabs activeLineMode='fixed'
                            style={{
                                '--fixed-active-line-width': '1.64rem',
                            }}>
                            <Tabs.Tab title='门诊楼' key='fruits' />
                            <Tabs.Tab title='住院楼' key='vegetables' />

                        </Tabs>
                    </div>
                    <div className='some-history-items  w-full h-[20.2rem] bg-second p-4 rounded-t-[1.14rem] flex flex-col gap-4  overflow-y-auto relative'>
                        <div className='cardcontainer'>
                            <Card title={
                                <div className='text-[#3734a9]'
                                    onClick={() => store.setState('SetPaths')}//当有确认起点
                                >
                                    {"住院楼（F1）"}
                                </div>
                            } >
                                <div className='w-full flex  gap-4 overflow-x-auto'>
                                    <div className='text-nowarp h-[2.29rem] rounded-[1.18rem] bg-[#F8F7FF] text-base p-2 text-[#000]' ><span>住院/收费</span></div>
                                    <div className='text-nowarp h-[2.29rem] rounded-[1.18rem] bg-[#F8F7FF] text-base p-2 text-[#000]' >医保和疗</div>
                                    <div className='text-nowarp h-[2.29rem] rounded-[1.18rem] bg-[#F8F7FF] text-base p-2 text-[#000]' >耳鼻喉科病区</div>
                                </div>
                            </Card>
                        </div>
                        {/* <div className='cardcontainer'>
                            <Card title={
                                <div className='text-[#3734a9]'
                                    onClick={() => store.setState('SetPaths')}//当没确定其顶啊
                                >
                                    {"住院楼（F2）"}
                                </div>
                            } >
                                <div className='w-full flex  gap-4 overflow-x-auto'>
                                    <div className='text-nowarp h-[2.29rem] rounded-[1.18rem] bg-[#F8F7FF] text-base p-2 text-[#000]' ><span>住院/收费</span></div>
                                    <div className='text-nowarp h-[2.29rem] rounded-[1.18rem] bg-[#F8F7FF] text-base p-2 text-[#000]' >医保和疗</div>
                                    <div className='text-nowarp h-[2.29rem] rounded-[1.18rem] bg-[#F8F7FF] text-base p-2 text-[#000]' >耳鼻喉科病区</div>
                                    <div className='text-nowarp h-[2.29rem] rounded-[1.18rem] bg-[#F8F7FF] text-base p-2 text-[#000]' >耳鼻喉科病区</div>
                                    <div className='text-nowarp h-[2.29rem] rounded-[1.18rem] bg-[#F8F7FF] text-base p-2 text-[#000]' >耳鼻喉科病区</div>
                                    <div className='text-nowarp h-[2.29rem] rounded-[1.18rem] bg-[#F8F7FF] text-base p-2 text-[#000]' >耳鼻喉科病区</div>

                                </div>
                            </Card>
                        </div> */}
                        {/* 
                        <div className='cardcontainer'>
                            <Card title={
                                <div className='text-[#3734a9]'>
                                    {"住院楼（F3）"}
                                </div>
                            } >
                                <div className='w-full flex  gap-4 overflow-x-auto'>
                                    <div className='text-nowarp h-[2.29rem] rounded-[1.18rem] bg-[#F8F7FF] text-base p-2 text-[#000]' ><span>住院/收费</span></div>
                                    <div className='text-nowarp h-[2.29rem] rounded-[1.18rem] bg-[#F8F7FF] text-base p-2 text-[#000]' >医保和疗</div>
                                    <div className='text-nowarp h-[2.29rem] rounded-[1.18rem] bg-[#F8F7FF] text-base p-2 text-[#000]' >耳鼻喉科病区</div>
                                    <div className='text-nowarp h-[2.29rem] rounded-[1.18rem] bg-[#F8F7FF] text-base p-2 text-[#000]' >耳鼻喉科病区</div>
                                    <div className='text-nowarp h-[2.29rem] rounded-[1.18rem] bg-[#F8F7FF] text-base p-2 text-[#000]' >耳鼻喉科病区</div>
                                    <div className='text-nowarp h-[2.29rem] rounded-[1.18rem] bg-[#F8F7FF] text-base p-2 text-[#000]' >耳鼻喉科病区</div>

                                </div>
                            </Card>
                        </div> */}
                        {/* <div className='cardcontainer'>
                            <Card title={
                                <div className='text-[#3734a9]'>
                                    {"住院楼（F4）"}
                                </div>
                            } >
                                <div className='w-full flex  gap-4 overflow-x-auto'>
                                    <div className='text-nowarp h-[2.29rem] rounded-[1.18rem] bg-[#F8F7FF] text-base p-2 text-[#000]' ><span>住院/收费</span></div>
                                    <div className='text-nowarp h-[2.29rem] rounded-[1.18rem] bg-[#F8F7FF] text-base p-2 text-[#000]' >医保和疗</div>
                                    <div className='text-nowarp h-[2.29rem] rounded-[1.18rem] bg-[#F8F7FF] text-base p-2 text-[#000]' >耳鼻喉科病区</div>
                                    <div className='text-nowarp h-[2.29rem] rounded-[1.18rem] bg-[#F8F7FF] text-base p-2 text-[#000]' >耳鼻喉科病区</div>
                                    <div className='text-nowarp h-[2.29rem] rounded-[1.18rem] bg-[#F8F7FF] text-base p-2 text-[#000]' >耳鼻喉科病区</div>
                                    <div className='text-nowarp h-[2.29rem] rounded-[1.18rem] bg-[#F8F7FF] text-base p-2 text-[#000]' >耳鼻喉科病区</div>

                                </div>
                            </Card>
                        </div> */}
                        {/* <div className='cardcontainer'>
                            <Card title={
                                <div className='text-[#3734a9]'>
                                    {"住院楼（F5）"}
                                </div>
                            } >
                                <div className='w-full flex  gap-4 overflow-x-auto'>
                                    <div className='text-nowarp h-[2.29rem] rounded-[1.18rem] bg-[#F8F7FF] text-base p-2 text-[#000]' ><span>住院/收费</span></div>
                                    <div className='text-nowarp h-[2.29rem] rounded-[1.18rem] bg-[#F8F7FF] text-base p-2 text-[#000]' >医保和疗</div>
                                    <div className='text-nowarp h-[2.29rem] rounded-[1.18rem] bg-[#F8F7FF] text-base p-2 text-[#000]' >耳鼻喉科病区</div>
                                    <div className='text-nowarp h-[2.29rem] rounded-[1.18rem] bg-[#F8F7FF] text-base p-2 text-[#000]' >耳鼻喉科病区</div>
                                    <div className='text-nowarp h-[2.29rem] rounded-[1.18rem] bg-[#F8F7FF] text-base p-2 text-[#000]' >耳鼻喉科病区</div>
                                    <div className='text-nowarp h-[2.29rem] rounded-[1.18rem] bg-[#F8F7FF] text-base p-2 text-[#000]' >耳鼻喉科病区</div>

                                </div>
                            </Card>
                        </div> */}

                    </div>
                </div>
            </FloatingPanel>
        </>
    )
}

export default index